// 全局样式文件

// 导入变量
@use './variables.scss';
@use './mixins.scss';

// 全局重置样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  font-size: 14px;
}

body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
  line-height: 1.5;
}

#app {
  height: 100%;
  overflow: hidden;
}

// 滚动条样式
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--el-fill-color-lighter);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--el-fill-color);
  border-radius: 4px;
  
  &:hover {
    background: var(--el-fill-color-dark);
  }
}

// NProgress 样式定制
#nprogress .bar {
  background: var(--el-color-primary) !important;
  height: 3px !important;
}

#nprogress .peg {
  box-shadow: 0 0 10px var(--el-color-primary), 0 0 5px var(--el-color-primary) !important;
}

// 通用工具类
.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

// 边距工具类
@for $i from 0 through 20 {
  .m-#{$i} { margin: #{$i * 4}px; }
  .mt-#{$i} { margin-top: #{$i * 4}px; }
  .mr-#{$i} { margin-right: #{$i * 4}px; }
  .mb-#{$i} { margin-bottom: #{$i * 4}px; }
  .ml-#{$i} { margin-left: #{$i * 4}px; }
  
  .p-#{$i} { padding: #{$i * 4}px; }
  .pt-#{$i} { padding-top: #{$i * 4}px; }
  .pr-#{$i} { padding-right: #{$i * 4}px; }
  .pb-#{$i} { padding-bottom: #{$i * 4}px; }
  .pl-#{$i} { padding-left: #{$i * 4}px; }
}

// 页面容器样式
.page-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--el-bg-color);
}

.page-header {
  margin-bottom: 20px;
  
  .page-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--el-text-color-primary);
    margin: 0;
  }
  
  .page-description {
    font-size: 14px;
    color: var(--el-text-color-regular);
    margin-top: 8px;
  }
}

.page-content {
  flex: 1;
  overflow: auto;
}

// 卡片样式
.card {
  background: var(--el-bg-color-page);
  border: 1px solid var(--el-border-color);
  border-radius: 8px;
  padding: 20px;
  
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    
    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--el-text-color-primary);
      margin: 0;
    }
  }
  
  .card-content {
    // 卡片内容样式
  }
}

// 状态指示器
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  
  .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
  
  &.status-online {
    background: var(--el-color-success-light-9);
    color: var(--el-color-success);
    
    .status-dot {
      background: var(--el-color-success);
    }
  }
  
  &.status-offline {
    background: var(--el-color-info-light-9);
    color: var(--el-color-info);
    
    .status-dot {
      background: var(--el-color-info);
    }
  }
  
  &.status-error {
    background: var(--el-color-danger-light-9);
    color: var(--el-color-danger);
    
    .status-dot {
      background: var(--el-color-danger);
    }
  }
  
  &.status-busy {
    background: var(--el-color-warning-light-9);
    color: var(--el-color-warning);
    
    .status-dot {
      background: var(--el-color-warning);
    }
  }
}

// 表格样式定制
.el-table {
  .el-table__header {
    th {
      background: var(--el-fill-color-lighter);
      color: var(--el-text-color-regular);
      font-weight: 600;
    }
  }
  
  .el-table__row {
    &:hover {
      background: var(--el-fill-color-lighter);
    }
  }
}

// 表单样式定制
.form-container {
  .el-form-item {
    margin-bottom: 20px;
  }
  
  .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--el-border-color);
  }
}

// 对话框样式定制
.el-dialog {
  .el-dialog__header {
    padding: 20px 20px 0;
    
    .el-dialog__title {
      font-weight: 600;
    }
  }
  
  .el-dialog__body {
    padding: 20px;
  }
  
  .el-dialog__footer {
    padding: 0 20px 20px;
    text-align: right;
  }
}

// 加载状态样式
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--el-text-color-placeholder);
  
  .loading-text {
    margin-top: 12px;
    font-size: 14px;
  }
}

// 空状态样式
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--el-text-color-placeholder);
  
  .empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
  }
  
  .empty-text {
    font-size: 14px;
    margin-bottom: 16px;
  }
  
  .empty-actions {
    // 空状态操作按钮样式
  }
}

// 响应式样式
@media (max-width: 768px) {
  .page-container {
    padding: 12px;
  }
  
  .card {
    padding: 16px;
  }
  
  .page-header {
    margin-bottom: 16px;
    
    .page-title {
      font-size: 18px;
    }
  }
}

// 深色主题适配
.dark {
  // 深色主题特定样式
  color-scheme: dark;
}

// 浅色主题适配  
.light {
  // 浅色主题特定样式
  color-scheme: light;
}